<template>
    <div class="interactive-event">
        <div class="main-panel-title">
            <span>操作</span>
        </div>
        <div class="base-row-item base-row-2">
            <div class="main-text-tran-50">事件</div>
            <div class="main-mas-input-simple main-mas-input-simple-input">
                <select class="main-mas-basis-select" v-model="activeInterac" @change="changeInterac">
                    <option :value="item.value" v-for="(item, index) in explorerList" :key="index">{{ item.label }}</option>
                </select>
            </div>
        </div>
        <div class="base-row-item base-row-2" v-if="getShow() == '1'">
            <div class="main-text-tran-50">{{ activeInterac == 'visit' ? '隐藏/显示': '开启高亮' }}</div>
            <el-switch v-model="visible" active-text="" inactive-text="" class="review-switch"></el-switch>
        </div>
        <div v-if="getShow() == '3'">
            <div class="main-panel-title">
                <span>相机坐标</span>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">X</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input v-model="cameraObj.x" type="number" class="mas-basis-input mas-basis-input2" />
                    </div>
                </div>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">Y</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input v-model="cameraObj.y" type="number" class="mas-basis-input mas-basis-input2" />
                    </div>
                </div>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">Z</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input v-model="cameraObj.z" type="number" class="mas-basis-input mas-basis-input2" />
                    </div>
                </div>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">偏航</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input v-model="cameraObj.yaw" type="number" class="mas-basis-input mas-basis-input2" />
                    </div>
                </div>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">俯视角</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input v-model="cameraObj.pitch" type="number" class="mas-basis-input mas-basis-input2" />
                    </div>
                </div>
            </div>
            <!-- <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">朝向</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input v-model="cameraObj.type" type="number" class="mas-basis-input mas-basis-input2" />
                    </div>
                </div>
            </div> -->
            <div class="main-panel-title">
                <span>过渡</span>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">镜头切换</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <select class="main-mas-basis-select" v-model="cameraObj.flyTime">
                        <option :value="item.value" v-for="(item, index) in cameraAnimationList" :key="index">{{ item.label
                        }}</option>
                    </select>
                </div>
            </div>
        </div>
        <div v-if="getShow() == '5'">
            <div class="main-panel-title">
                <span>参数</span>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">天气</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <select class="main-mas-basis-select" v-model="weatherMap.type">
                        <option :value="item.value" v-for="(item, index) in weatherList" :key="index">{{ item.label }}
                        </option>
                    </select>
                </div>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">强度</div>
                <el-slider v-model="weatherMap.rainsnowStrength" :format-tooltip="formatTooltip"></el-slider>
            </div>
        </div>
        <div v-if="getShow() == '6'">
            <div class="main-panel-title">
                <span>参数</span>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">日期</div>
                <el-date-picker class="review-el-date" v-model="weatherTimeMap.date" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">时间开始</div>
                <el-time-picker class="review-el-date" v-model="weatherTimeMap.start" placeholder="选择时间" format="H-m" value-format="H-m"></el-time-picker>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">时间结束</div>
                <el-time-picker class="review-el-date" v-model="weatherTimeMap.end" placeholder="选择时间" format="H-m" value-format="H-m"></el-time-picker>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">切换时长(秒)</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input v-model="weatherTimeMap.duration" type="number" class="mas-basis-input mas-basis-input2" />
                    </div>
                </div>
            </div>
        </div>
        <div v-if="getShow() == '4'">
            <div class="main-panel-title">
                <span>参数</span>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">开启闪烁</div>
                <el-switch v-model="flickerMap.visible" active-text="" inactive-text="" class="review-switch"></el-switch>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">强度</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input v-model="flickerMap.strength" type="number" class="mas-basis-input mas-basis-input2" />
                    </div>
                </div>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">频率</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input v-model="flickerMap.frequency" type="number" class="mas-basis-input mas-basis-input2" />
                    </div>
                </div>
            </div>
        </div>
        <div v-if="getShow() == '1' || getShow() == '2' || getShow() == '4'">
            <div class="main-panel-title">
                <span>目标</span>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">图层ID</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input v-model="interactiveObj.Id" :id="window.getRootName() + 'EVENT_INTERACTIVE_TCID'"
                            class="mas-basis-input mas-basis-input2" />
                    </div>
                </div>
            </div>
            <div class="base-row-item base-row-2">
                <div class="main-text-tran-50">对象ID</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input v-model="interactiveObj.ObjectID" :id="window.getRootName() + 'EVENT_INTERACTIVE_DCID'"
                            class="mas-basis-input mas-basis-input2" />
                    </div>
                </div>
            </div>
        </div>
        <div class="base-row-item base-row-2" v-if="getShow() == '1' || getShow() == '2' || getShow() == '3' || getShow() == '4'">
            <div></div>
            <div class="edit-data-btn" @click="getClickEvent">拾取目标</div>
        </div>
    </div>
</template>

<script>
import bus from '@/js/event/bus.js';
import util from '@/js/util/util.js';
import event from '@/js/main/event.js';

export default {
    name: 'InteractiveEvent',
    props: {
        eventData: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            window: window,
            activeInterac: 'visit',
            explorerList: event.explorerList,
            interactiveObj: {
                Id: '',
                ObjectID: '',
                Type: ''
            },
            cameraObj: {
                x: 0,
                y: 0,
                z: 0,
                yaw: 0,
                pitch: 0,
                flyTime: 2,
                Type: ''
            },
            cameraMap: {
                x: 'x',
                y: 'y',
                z: 'z',
                yaw: '水平视角',
                pitch: '俯视角',
                Type: ''
            },
            cameraAnimationList: [
                {
                    value: 2,
                    label: '飞到'
                },
                {
                    value: 0,
                    label: '跳转'
                }
            ],
            weatherMap: {
                rainsnowStrength: 100,
                type: 'disable',
                Type: ''
            },
            weatherList: [
                {
                    value: 'disable',
                    label: '晴'
                },
                {
                    value: 'rain',
                    label: '雨'
                },
                {
                    value: 'snow',
                    label: '雪'
                }
            ],
            weatherTimeMap: {
                date: '',
                start: '9-40',
                end: '18-40',
                duration: 10,
                Type: ''
            },
            flickerMap: {
                strength: 5,
                frequency: 2,
                growId: util.getID(),
                visible: true,
                Type: ''
            },
            visible: true,
            type: 'add',
            editData: null,
            mapType: 'explorer'
        };
    },
    mounted() {
        bus.on('getEventData', this.getEventData);
        this.$nextTick(() => {
            if (this.eventData.length > 0 && this.eventData[0].event === 'interactive') {
                this.type = 'edit';
                this.editData = this.eventData[0];
                this.setEventData(this.eventData[0]);
            } else {
                this.type = 'add';
            }
        });
    },
    destroyed() {
        bus.off('getEventData', this.getEventData);
    },
    methods: {
        getEventData() {
            let mode = this.getShow();
            let list = [];
            if (mode == '1' || mode == '2') {
                if (this.interactiveObj.Id === '') {
                    list.push('请填写ID');
                }
            } else if (mode == '3') {
                for (const key in this.cameraObj) {
                    if (this.cameraObj[key] === '') {
                        list.push(`请填写${this.cameraMap[key]}`);
                    }
                }
            } else if (mode == '6') {
                let flag = false;
                for (const key in this.weatherTimeMap) {
                    if (this.weatherTimeMap[key] === '') {
                        flag = true;
                    }
                }
                if (flag) {
                    list.push(`请填写日期，时间`);
                }
            } else if (mode == '4') {
                let flag = false;
                for (const key in this.flickerMap) {
                    if (this.weatherTimeMap[key] === '') {
                        flag = true;
                    }
                }
                if (flag) {
                    list.push(`请填写强度、频率`);
                }
            }
            if (list.length === 0) {
                let param = {
                    activeInterac: this.activeInterac,
                    mapType: this.mapType
                }
                switch (mode) {
                    case 1:
                        param.visible = this.visible;
                        param.Id = this.interactiveObj.Id;
                        param.ObjectID = this.interactiveObj.ObjectID;
                        param.Type = this.interactiveObj.Type;
                        break;
                    case 2:
                        param.Id = this.interactiveObj.Id;
                        param.ObjectID = this.interactiveObj.ObjectID;
                        param.Type = this.interactiveObj.Type;
                        break;
                    case 3:
                        param.x = this.cameraObj.x;
                        param.y = this.cameraObj.y;
                        param.z = this.cameraObj.z;
                        param.yaw = this.cameraObj.yaw;
                        param.pitch = this.cameraObj.pitch;
                        param.flyTime = this.cameraObj.flyTime;
                        param.Type = this.cameraObj.Type;
                        break;
                    case 4:
                        param.visible = this.flickerMap.visible;
                        param.strength = this.flickerMap.strength;
                        param.frequency = this.flickerMap.frequency;
                        param.growId = this.flickerMap.growId;
                        param.Id = this.interactiveObj.Id;
                        param.ObjectID = this.interactiveObj.ObjectID;
                        param.Type = this.interactiveObj.Type;
                        break;
                    case 5:
                        if (this.weatherMap.type == 'disable') {
                            param.rainsnowStrength = +this.weatherMap.rainsnowStrength / 10;
                        } else {
                            param.rainsnowStrength = +this.weatherMap.rainsnowStrength / 100;
                        }
                        param.type = this.weatherMap.type;
                        param.Type = this.weatherMap.Type;
                        break;
                    case 6:
                        param.date = this.weatherTimeMap.date;
                        param.start = this.weatherTimeMap.start;
                        param.end = this.weatherTimeMap.end;
                        param.duration = this.weatherTimeMap.duration;
                        param.Type = this.weatherTimeMap.Type;
                        break;
                    default:
                        break;
                }
                return param;
            } else {
                return {
                    error: true,
                    message: list
                };
            }
        },
        setEventData(event) {
            this.activeInterac = event.param.activeInterac;
            let data = event.param;
            this.getInfoData(data);
        },
        async getClickEvent() {
            let mode = this.getShow();
            if (mode == '3') {
                let data = await this.$store.dispatch('getCameraLocation');
                this.getInfoData(data, true);
                return false;
            }
            let info = this.$store.state.clickInfo;
            if (info.Id) {
                let flag = false;
                if (mode == '1' || mode == '2' || mode == '4') {
                    flag = true;
                }
                this.getInfoData(info, flag);
            }
        },
        getInfoData(data, flag = false) {
            let mode = this.getShow();
            switch (mode) {
                case 1:
                    if (!flag) {
                        this.visible = data.visible;
                    }
                    this.interactiveObj.Id = data.Id || '';
                    this.interactiveObj.ObjectID = data.ObjectID || '';
                    this.interactiveObj.Type = data.Type || '';
                    break;
                case 2:
                    this.interactiveObj.Id = data.Id || '';
                    this.interactiveObj.ObjectID = data.ObjectID || '';
                    this.interactiveObj.Type = data.Type || '';
                    break;
                case 3:
                    this.cameraObj.x = data.x || 0;
                    this.cameraObj.y = data.y || 0;
                    this.cameraObj.z = data.z || 0;
                    this.cameraObj.yaw = data.yaw || 0;
                    this.cameraObj.pitch = data.pitch || 0;
                    this.cameraObj.Type = data.Type || '';
                    if (!flag) {
                        this.cameraObj.flyTime = data.flyTime === '' ? 2 : data.flyTime;
                    }
                    break;
                case 4:
                    if (flag) {
                        this.interactiveObj.Id = data.Id || '';
                        this.interactiveObj.ObjectID = data.ObjectID || '';
                        this.interactiveObj.Type = data.Type || '';
                    } else {
                        this.flickerMap.visible = data.visible;
                        this.flickerMap.strength = data.strength || 5;
                        this.flickerMap.frequency = data.frequency || 2;
                        this.flickerMap.growId = data.growId || '';
                        this.flickerMap.Type = data.Type || '';
                        this.interactiveObj.Id = data.Id || '';
                        this.interactiveObj.ObjectID = data.ObjectID || '';
                        this.interactiveObj.Type = data.Type || '';
                    }
                    break;
                case 5:
                    if (data.type == 'disable') {
                        this.weatherMap.rainsnowStrength = +data.rainsnowStrength * 10;
                    } else {
                        this.weatherMap.rainsnowStrength = +data.rainsnowStrength * 100;
                    }
                    this.weatherMap.type = data.type;
                    this.weatherMap.Type = data.Type || '';
                    break;
                case 6:
                    this.weatherTimeMap.date = data.date;
                    this.weatherTimeMap.start = data.start;
                    this.weatherTimeMap.end = data.end;
                    this.weatherTimeMap.duration = +data.duration;
                    this.weatherTimeMap.Type = data.Type;
                    break;
                default:
                    break;
            }
        },
        getShow() {
            let mode = 1;
            switch (this.activeInterac) {
                case 'visit':
                case 'highligh':
                    mode = 1;
                    break;
                case 'focus':
                    mode = 2;
                    break;
                case 'camera':
                    mode = 3;
                    break;
                case 'flicker':
                    mode = 4;
                    break;
                case 'weather':
                    mode = 5;
                    break;
                case 'weatherTime':
                    mode = 6;
                    break;
                default:
                    mode = 0;
                    break;
            }
            return mode;
        },
        formatTooltip(val) {
            if (this.weatherMap.type == 'disable') {
                return val / 10;
            } else {
                return val / 100;
            }
        },
        changeInterac(event) {
            let value = event.target.value;
            if (this.type == 'edit' && value === this.editData.param.activeInterac) {
                this.getInfoData(this.editData.param);
                return
            }
            let mode = this.getShow();
            switch (mode) {
                case 1:
                    this.visible = true;
                    this.interactiveObj = this.$options.data().interactiveObj;
                    break;
                case 2:
                    this.interactiveObj = this.$options.data().interactiveObj;
                    break;
                case 3:
                    this.cameraObj = this.$options.data().cameraObj;
                    break;
                case 4:
                    this.flickerMap = this.$options.data().flickerMap;
                    this.interactiveObj = this.$options.data().interactiveObj;
                    break;
                case 5:
                    this.weatherMap = this.$options.data().weatherMap;
                    break;
                case 6:
                    let date = new Date();
                    let y = date.getFullYear();
                    let m = date.getMonth() + 1;
                    m = m < 10 ? '0' + m : m;
                    let d = date.getDate();
                    d = d < 10 ? '0' + d : d;
                    this.weatherTimeMap.date = `${y}-${m}-${d}`;
                    break;
            
                default:
                    break;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.interactive-event {
    height: 100%;
}

.base-row-item {
    height: 30px;
    width: 100%;
    display: grid;
    grid-gap: 6px;
    align-items: center;
    font-weight: 600;
    cursor: auto;
    margin: 5px 0;
}

.base-row-2 {
    grid-template-columns: 60px 1fr 5px;
}

.edit-data-btn {
    height: 30px;
    line-height: 30px;
    background: #ffffff0f;
    color: $FontWhite;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;

    &:hover {
        background: #ffffff33;
    }
}
</style>